<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    var xmlHttp;
    function createXMLHttp() {
        if (window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();     //针对FireFox内核的浏览器
        }else {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.open("GET","allarea.xml");
        xmlHttp.onreadystatechange = getCallback;
        xmlHttp.send(null);
        console.log("触发onload");
    }
    function getCallback() {
        console.log("触发callback");
        if (xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].children;
                //上面的一条语句可以抵得上下面的3条语句，下面只是为了证明DOMParser()也可以用来解析xml
//               var xmlString = xmlHttp.responseText;
//               var  domParser = new  DOMParser();
//               var  allarea = domParser.parseFromString(xmlString, 'text/xml').getElementsByTagName("allarea")[0].children;

                console.log(allarea);
                var select = document.getElementById("city");
                for(var i=0; i < allarea.length; i++){
                        var area = allarea[i];
                    console.log(area);
                        var option = document.createElement("option");
                        var id = area.getElementsByTagName("id")[0].firstChild.nodeValue;
                        var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
                        option.setAttribute("value","id");
                        option.appendChild(document.createTextNode(title));
                        select.appendChild(option);
                }
//下面的语句注释掉是因为其实可以用children来代替childNodes，这样在for语句中就可以不用判断nodeType的值，因为children取得的总是元素节点
//                var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes;
//                var select = document.getElementById("city");
//                for(var i=0; i < allarea.length; i++){
//                    if (allarea[i].nodeType == 1){
//                        var area = allarea[i];
//                        var option = document.createElement("option");
//                        var id = area.getElementsByTagName("id")[0].firstChild.nodeValue;
//                        var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
//                        option.setAttribute("value","id");
//                        option.appendChild(document.createTextNode(title));
//                        select.appendChild(option);
//                    }
//                }
            }
        }
    }
</script>
<!--<body >-->
<body onload="createXMLHttp()">
<form action="" >
    请选择喜欢的城市：
    <select name="city" id="city">
        <option value="0">请选择</option>
    </select>
</form>
<!--<div id="outer">-->
    <!--<div id="inner">-->
    <!--<span>hhh <i>ooo</i></span><span>sdfsdf</span><span></span>-->
<!--</div>-->

    <!--<span>hhh</span>-->
    <!--<span>xxx</span>-->
    <!--<span>zzz</span>-->
    <!--<span>ccc</span>-->
<!--</div>-->
<!--<script>-->
    <!--window.onload = function () {-->
        <!--var outer = document.getElementById("outer");-->
        <!--var inner = document.getElementById("inner");-->

        <!--console.log(outer.childNodes.item(3));   //输出：<span>hhh</span>-->
        <!--console.log(outer.childNodes.item(3).childNodes);   //输出[text]，span下只有一个文本节点-->
        <!--console.log(outer.childNodes.item(3).firstChild.nodeName);//firstChild指的是span下的文本节点，所以是#text-->
        <!--console.log(outer.childNodes.item(3).firstChild.nodeType);//3-->
        <!--console.log(outer.childNodes.item(3).firstChild.nodeValue);//hhh.如果是元素节点，不管是DIV还是SPAN，这里都是null-->
<!--//        console.log(inner.parentNode);-->
<!--//        console.log(outer.innerHTML);-->
<!--//        console.log(outer.innerText);-->
<!--//        console.log(outer.id);-->
<!--//        console.log(outer.nodeName);-->
<!--//        console.log(outer.nodeValue);-->
<!--//        console.log(outer.nodeType);-->
<!--//        console.log(outer.childNodes);-->
<!--//        console.log(outer.firstChild);-->
<!--//        console.log(outer.lastChild);-->
<!--//        console.log(outer.childElementCount);-->
<!--//        console.log(outer.firstElementChild);-->
<!--//        console.log(outer.lastElementChild);-->
<!--//        console.log(outer.tagName);-->
<!--//        console.log(outer.nodeName);-->

    <!--}-->
<!--</script>-->
</body>
</html>